<template>
  <el-carousel
    :height="height"
    :type="type"
    :indicator-position="position"
    class="carousel"
  >
    <el-carousel-item v-for="picture in pictures" :key="picture">
      <img :src="picture.pic" />
    </el-carousel-item>
  </el-carousel>
</template>

<script setup lang="ts">
import { Banner } from '@/model'
defineProps<{
  // 图片数组
  pictures: Banner[]
  type: string
  height: string
  position?: string
}>()
</script>

<style lang="less" scoped>
.carousel {
  width: 80vw;
  border-radius: 10px;

  &:deep(.el-carousel_mask) {
    border-radius: 10px;
  }

  img {
    height: v-bind(height);
    object-fit: cover;
    object-position: center top;
    border-radius: 10px;
    box-shadow:
      rgba(0, 0, 0, 0.12) 0px 1px 3px,
      rgba(0, 0, 0, 0.24) 0px 1px 2px;
  }
}
</style>
